<template>

  <!-- 溯源信息 -->
  <el-card style="max-width: 1280px; padding: 20px">
    <!-- 外层容器使用flex布局 -->
    <div class="product-container">
      <!-- 左侧图片区域 -->
      <div class="product-image">
        <img :src="tableData[0].coverImage" alt="商品图片" class="main-image" />
      </div>

      <!-- 右侧信息区域 -->
      <div class="product-info">
        <!-- 商品名称 -->
        <div class="product-name">
          {{ tableData[0].goodsName }}
        </div>

        <!-- 信息列表 -->
        <div class="info-grid">
          <div class="info-item">
            <span class="label">生产批次：</span>
            <span class="value">{{ tableData[0].batch }}</span>
          </div>
          <div class="info-item">
            <span class="label">保质期：</span>
            <span class="value">{{ tableData[0].shelf_life }}天</span>
          </div>
          <div class="info-item">
            <span class="label">生产许可证号：</span>
            <span class="value">{{ tableData[0].productionlicense }}</span>
          </div>
          <div class="info-item">
            <span class="label">生产企业：</span>
            <span class="value">{{ tableData[0].production_Enterprise }}</span>
          </div>
          <h5>产品检验报告</h5>
          <!-- 可根据需要添加更多信息项 -->
        </div>
        <br />
        <!-- action -->
        <!-- :limit="5"-->
        <!-- 多图上传区域 -->
        <div class="image-upload-section">
          <el-upload class="image-uploader" action="http://localhost:5127/api/Manage/Upload" :multiple="true"
            :on-success="handleUploadSuccess" :on-error="handleUploadError" list-type="picture-card" :limit="5"
            :on-exceed="handleExceed">
            <el-icon class="upload-icon">
              <Plus />
            </el-icon>
            <div class="upload-text">点击上传图片</div>
          </el-upload>
        </div>
      </div>
    </div>
  </el-card>
  <br />
  <div> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="养殖信息" name="first">
        <div>
          <h5 style="color: #0044bb">
            养殖信息
            <el-button type="primary" plain style="margin-left: 20px">设置</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">品种</span>
              <span class="value">{{ GetAquaculture.variety }}</span>
            </div>
            <div class="info-item">
              <span class="label">来源</span>
              <span class="value">{{ GetAquaculture.source }}</span>
            </div>
            <div class="info-item">
              <span class="label">饲养天数</span>
              <span class="value">{{ GetAquaculture.feedDay }}天</span>
            </div>
            <div class="info-item">
              <span class="label">饲料品牌</span>
              <span class="value">{{ GetAquaculture.feedbrand }}</span>
            </div>
            <div class="info-item">
              <span class="label">饲养负责人</span>
              <span class="value">{{ GetAquaculture.headfeeding }}</span>
            </div>
            <div class="info-item">
              <span class="label">出栏日期</span>
              <span class="value">{{ GetAquaculture.leaveDate }}</span>
            </div>
          </div>
        </div>

        <br />

        <!-- 保健信息 -->
        <div>
          <h5 style="color: #0044bb">
            保健信息
            <el-button type="primary" plain style="margin-left: 20px">新增行</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <!-- <el-table :data="Healths" border style="width: 100%">
        <el-table-column prop="feedays" label="饲养天数" width="180" />
        <el-table-column prop="healthType" label="保健方式" width="180" />
        <el-table-column prop="healthIdea" label="保健方法" width="180" />
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button link type="primary" size="small">修改</el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
</el-table-column>
</el-table> -->
          <!-- <table>
        <tbody>
          <tr>
            <td><input type="text" style="padding: 6px;width: 160px;" v-model="healthData.feedays"></td>
            <td><input type="text" style="padding: 6px;width: 160px;" v-model="healthData.healthType"></td>
            <td><input type="text" style="padding: 6px;width: 160px;" v-model="healthData.healthIdea"></td>
            <td>
              <el-button style="margin-left: 8px" link type="primary" size="small" @click="saveHealth()">保存</el-button>
              <el-button link type="primary" size="small" @click="cancelHealth()">取消</el-button>
            </td>
          </tr>
        </tbody>
      </table> -->
        </div>
        <br />

        <!-- 动检证图片 -->
        <div>

          <h5 style="color: #0044bb">
            动检证
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.livestock_Certification" style="width: 150px; height: 150px;" alt="">
                </td>
                <td><el-upload v-model:file-list="GetPic.livestock_Certification"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handLivestock_Certification" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>



        </div>

        <br>
        <br>
        <!-- 企业信息 -->
        <div>
          <h5 style="color: #0044bb">
            企业信息
            <el-button type="primary" plain style="margin-left: 20px">设置</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <div class="info-grid">
            <span class="info-item">养殖场：{{ GetBreeding.farms }}</span>
            <span class="info-item">负责人：{{ GetBreeding.head }}</span>
            <span class="info-item">存栏数量：{{ GetBreeding.number_Stocks }}只</span>
          </div>
        </div>
        <br>
        <br>
        <!-- 企业图片 -->
        <div>
          <h5 style="color: #0044bb">
            企业图片

            <el-button type="danger" @click="PicUpd()">修改</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.breedingImg" style="width: 150px; height: 150px;" alt="">
                </td>
                <td>
                  <el-upload v-model:file-list="GetPic.breedingImg" action="http://localhost:5127/api/Manage/Upload"
                    list-type="picture-card" :on-preview="handBreedingImg" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload>
                </td>
              </tr>
            </tbody>

          </table>



          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </div>
      </el-tab-pane>

      <!-- 屠宰 -->


      <el-tab-pane label="屠宰信息" name="second">
        <div>
          <h5 style="color: #0044bb">
            屠宰信息
            <el-button type="primary" plain style="margin-left: 20px">设置</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">批次</span>
              <span class="value">{{ GetSlaughteringInformation.slaughteringrBatch }}</span>
            </div>
            <div class="info-item">
              <span class="label">到场均重</span>
              <span class="value">{{ GetSlaughteringInformation.average_Weight }}</span>
            </div>
            <div class="info-item">
              <span class="label">到场时间</span>
              <span class="value">{{ GetSlaughteringInformation.arrival_Time }}天</span>
            </div>
            <div class="info-item">
              <span class="label">屠宰时间</span>
              <span class="value">{{ GetSlaughteringInformation.slaughtering_Time }}</span>
            </div>

          </div>
        </div>

        <br />
        <br />
        <!-- 相关资质 -->
        <div>
          <h5 style="color: #0044bb">
            相关资质

          </h5>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.certification_Documents" style="width: 150px; height: 150px;" alt="">
                </td>
                <td> <el-upload v-model:file-list="GetPic.certification_Documents"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handCertification_Documents" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>


        </div>
        <br />
        <br />
        <br />

        <!-- 企业信息 -->
        <div>
          <h5 style="color: #0044bb">
            企业信息
            <el-button type="primary" plain style="margin-left: 20px">设置</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <div class="info-grid">
            <span class="info-item">公司名称：{{ GetSlaughteringEnterprise.slaughteringCompanyName }}</span>
            <span class="info-item">成立时间：{{ GetSlaughteringEnterprise.foundedDate }}</span>
            <span class="info-item">公司地址：{{ GetSlaughteringEnterprise.detailedAddres }}</span>
            <br>
            <span class="info-item">公司简介：{{ GetSlaughteringEnterprise.companyProfile }}</span>
          </div>
        </div>
        <br>
        <br>
        <!-- 企业图片 -->
        <div>
          <h5 style="color: #0044bb">
            企业图片
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.slaughteringImg" style="width: 150px; height: 150px;" alt="">
                </td>
                <td> <el-upload v-model:file-list="GetPic.slaughteringImg"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handSlaughteringImg" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>
        </div>
      </el-tab-pane>



      <!-- 深加工 -->
      <el-tab-pane label="深加工信息" name="third">
        <div>
          <h5 style="color: #0044bb">
            深加工信息
            <el-button type="primary" plain style="margin-left: 20px">设置</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">班组</span>
              <span class="value">{{ GetProcessingInformation.work_Team }}</span>
            </div>
            <div class="info-item">
              <span class="label">负责人</span>
              <span class="value">{{ GetProcessingInformation.responsible_Person }}</span>
            </div>


          </div>
        </div>

        <br />
        <br />
        <!-- 食品安全 -->
        <div>
          <h5 style="color: #0044bb">
            食品安全信息
            <el-button type="primary" plain style="margin-left: 20px">新增行</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
        </div>
        <table>
          <tbody>
            <tr v-for="item in GetPic">
              <td>
                <img :src="item.food_Safety" style="width: 150px; height: 150px;" alt="">
              </td>
              <td> <el-upload v-model:file-list="GetPic.food_Safety"
                  action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                  :on-preview="handFood_Safety" :on-remove="handleRemove">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </el-upload></td>
            </tr>
          </tbody>

        </table>
        <br />
        <br />
        <br />
        <!-- 供应商信息 -->
        <div>

          <h5 style="color: #0044bb">
            供应商信息
          </h5>
          <div style="border: 1px solid #ccc"></div>

          <table>
            <tbody>
              <tr>
                <td><span class="info-item">原料</span></td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td><span class="info-item">生产批次：{{ route.query.batch }}</span></td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td>
                  <span class="info-item">相关材料</span>
                </td>
              </tr>
            </tbody>

          </table>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.raw_Material" style="width: 150px; height: 150px;" alt="">
                </td>
                <td> <el-upload v-model:file-list="GetPic.raw_Material"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handRaw_Material" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>
          <table>
            <tbody>
              <tr>
                <td><span class="info-item">辅料<el-button type="primary" plain
                      style="margin-left: 20px">设置</el-button></span>
                </td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td><span class="info-item">生产批次：{{ route.query.batch }}</span></td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td>
                  <span class="info-item">相关材料</span>
                </td>
              </tr>
            </tbody>

          </table>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.auxiliary_Materials" style="width: 150px; height: 150px;" alt="">
                </td>
                <td> <el-upload v-model:file-list="GetPic.auxiliary_Materials"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handAuxiliary_Materials" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>
          <table>
            <tbody>
              <tr>
                <td><span class="info-item">添加剂<el-button type="primary" plain style="margin-left: 20px">设置</el-button>
                  </span></td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td><span class="info-item">生产批次：{{ route.query.batch }}</span></td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td>
                  <span class="info-item">相关材料</span>
                </td>
              </tr>
            </tbody>

          </table>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.additive_Materials" style="width: 150px; height: 150px;" alt="">
                </td>
                <td> <el-upload v-model:file-list="GetPic.additive_Materials"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handAdditive_Materials" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>
          <table>
            <tbody>
              <tr>
                <td><span class="info-item">包材<el-button type="primary" plain
                      style="margin-left: 20px">设置</el-button></span>
                </td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td><span class="info-item">生产批次：{{ route.query.batch }}</span></td>
              </tr>
            </tbody>

          </table>

          <table>
            <tbody>
              <tr>
                <td>
                  <span class="info-item">相关材料</span>
                </td>
              </tr>
            </tbody>

          </table>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.packaging_Materials" style="width: 150px; height: 150px;" alt="">
                </td>
                <td> <el-upload v-model:file-list="GetPic.packaging_Materials"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handPackaging_Materials" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>

        </div>

        <br>
        <br>
        <!-- 企业信息 -->
        <div>
          <h5 style="color: #0044bb">
            企业信息
            <el-button type="primary" plain style="margin-left: 20px">设置</el-button>
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <div class="info-grid">
            <span class="info-item">公司名称{{ GetProcessingEnterprise.companyName }}</span>
            <span class="info-item">生产许可证号{{ GetProcessingEnterprise.generatingLicenses }}</span>

          </div>
        </div>
        <br>
        <br>
        <!-- 企业图片 -->
        <div>
          <h5 style="color: #0044bb">
            企业照片
          </h5>
          <div style="border: 1px solid #ccc"></div>
          <table>
            <tbody>
              <tr v-for="item in GetPic">
                <td>
                  <img :src="item.processingImg" style="width: 150px; height: 150px;" alt="">
                </td>
                <td> <el-upload v-model:file-list="GetPic.processingImg"
                    action="http://localhost:5127/api/Manage/Upload" list-type="picture-card"
                    :on-preview="handProcessingImg" :on-remove="handleRemove">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload></td>
              </tr>
            </tbody>

          </table>
        </div>
      </el-tab-pane>

    </el-tabs></div>
  <!-- Element Plus 对话框 -->

</template>
<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'

import { Open, Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

const router = useRouter()
const route = useRoute()
const ids = route.query.basic_Traceability
onMounted(() => {
  table();
  Breedingtable();
  SlaughteringInformationtable();
  SlaughteringEnterprisetable();
  ProcessingEnterprise();
  ProcessingInformatiotable();
  Pic();
  getHealth();
  // alert(route.query.batch)
})



const healthData = reactive({
  "id": "",
  "feedays": "",
  "healthType": "",
  "healthIdea": ""
})
const Healths = reactive({})
const getHealth = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetHealth',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })

    .then(res => {
      Object.assign(Healths, res.data.data)
    })
}



//取消
const cancelHealth = () => {
  healthData.feedays = "",
    healthData.healthType = "",
    healthData.healthIdea = ""
}

const logic = reactive({
  isOpen: false,



})




const Opens = (row: any) => {
  logic.isOpen = true;
  modelAqu.variety = row.variety,
    modelAqu.batch = row.batch,
    modelAqu.source = row.source,
    modelAqu.feedDay = row.feedDay,
    modelAqu.feedbrand = row.feedbrand,
    modelAqu.headfeeding = row.headfeeding,
    modelAqu.leaveDate = row.leaveDate

}


const save = () => {

  axios({
    url: 'http://localhost:5127/api/Upd/UpdAquaculture',
    method: 'post',
    data: modelAqu
  })
    .then(res => {
      if (res.data.code == 99400) {
        ElMessage.success(res.data.message)
        table()
        logic.isOpen = false;
        return;

      }
      else {
        ElMessage.error(res.data.message)
        return;
      }
    })


}
const modelAqu = reactive({
  "cultivationId": "",
  "batch": route.query.batch,
  "variety": "",
  "source": "",
  "feedDay": "",
  "feedbrand": "",
  "headfeeding": "",
  "leaveDate": ""

})


const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.inspection_Repor
  dialogVisible.value = true
}
const handLivestock_Certification: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.livestock_Certification
  dialogVisible.value = true
}
const handCertification_Documents: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.certification_Documents
  dialogVisible.value = true
}
const handFood_Safety: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.food_Safety
  dialogVisible.value = true
}
const handRaw_Material: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.raw_Material
  dialogVisible.value = true
}
const handAuxiliary_Materials: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.auxiliary_Materials
  dialogVisible.value = true
}
const handAdditive_Materials: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.additive_Materials
  dialogVisible.value = true
}
const handPackaging_Materials: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.packaging_Materials
  dialogVisible.value = true
}
const handSlaughteringImg: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.slaughteringImg
  dialogVisible.value = true
}
const handProcessingImg: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.processingImg
  dialogVisible.value = true
}
const handBreedingImg: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = GetPic.value.breedingImg
  dialogVisible.value = true
}

const tableData = <any>ref([{
  basic_Traceability: ids,
  gid: "",
  batch: "",
  shelf_life: "",
  productionlicense: "",
  production_Enterprise: "",
  information_Completeness: 100,
  productInspectionReportPath: "aa",
  coverImage: "",

  createUser: "张三",
  isDeleted: false,
}])


onMounted(() => {
  getTableData();
})
const getTableData = () => {
  axios
    .get("http://localhost:5127/api/Manage/Show", {
      params: {
        Index: 1,
        Size: 3,
        Basic_Traceability: ids
      },
    })
    .then((res) => {
      tableData.value = res.data.data.pageData;
    });
};


const uploadedImages = ref<Array<{ url: string; name: string }>>([]);

// 处理上传成功
const handleUploadSuccess = (response: any, file: any) => {
  // 实际项目中根据后端返回结构调整
  uploadedImages.value.push({
    url: URL.createObjectURL(file.raw), // 临时预览地址
    name: file.name,
  });
  ElMessage.success(`图片 "${file.name}" 上传成功`);
};

// 处理上传失败
const handleUploadError = (error: any, file: any) => {
  ElMessage.error(`图片 "${file.name}" 上传失败，请重试`);
};

// 处理超出上传数量限制
const handleExceed = (files: any, fileList: any) => {
  ElMessage.warning(`最多只能上传5张图片`);
};




///标签页
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

//养殖信息
const GetAquaculture = reactive<any>({})

const table = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetAquaculture',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })
    .then(res => {

      Object.assign(GetAquaculture, res.data.data[0])
    })
}
//养殖企业信息
const GetBreeding = reactive<any>({})

const Breedingtable = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetBreeding',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })
    .then(res => {

      Object.assign(GetBreeding, res.data.data[0])
    })
}

//屠宰信息
const GetSlaughteringInformation = reactive<any>({})

const SlaughteringInformationtable = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetSlaughteringInformation',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })
    .then(res => {

      Object.assign(GetSlaughteringInformation, res.data.data[0])
    })
}
//屠宰企业企业信息
const GetSlaughteringEnterprise = reactive<any>({})

const SlaughteringEnterprisetable = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetSlaughteringEnterprise',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })
    .then(res => {

      Object.assign(GetSlaughteringEnterprise, res.data.data[0])
    })
}
//养殖企业信息
const GetProcessingEnterprise = reactive<any>({})

const ProcessingEnterprise = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetProcessingEnterprise',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })
    .then(res => {

      Object.assign(GetProcessingEnterprise, res.data.data[0])
    })
}
//养殖企业信息
const GetProcessingInformation = reactive<any>({})

const ProcessingInformatiotable = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetProcessingInformation',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })
    .then(res => {

      Object.assign(GetProcessingInformation, res.data.data[0])
    })
}
const GetPic = ref<any>([])

const Pic = () => {
  axios({
    url: 'http://localhost:5127/api/Manage/GetPictureInformation',
    method: 'get',
    params: {
      batch: route.query.batch
    }
  })
    .then(res => {
      GetPic.value = res.data.data

    })
}
const model = reactive({
  "pictureId": "",
  "inspection_Repor": "",
  "livestock_Certification": "",
  "certification_Documents": "",
  "food_Safety": "",
  "raw_Material": "",
  "auxiliary_Materials": "",
  "additive_Materials": "",
  "packaging_Materials": "",
  "slaughteringImg": "",
  "processingImg": "",
  "breedingImg": "",
  "batch": route.query.batch

})
const PicUpd = () => {
  axios({
    url: 'http://localhost:5127/api/Upd/UpdPic',
    method: 'post',
    data: model
  })
    .then(res => {
      if (res.data.code == 99400) {
        ElMessage.success(res.data.message)
        table();

        return;

      }
      else {
        ElMessage.error(res.data.message)
        return;
      }
    })
}

</script>

<style scoped>
.product-container {
  display: flex;
  gap: 30px;
  /* 图片与信息区域的间距 */
  align-items: flex-start;
}

.product-image-section {
  flex-shrink: 0;
  /* 图片区域不缩小 */
  width: 300px;
}

.main-image-container {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.main-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  /* 保持图片比例，裁剪多余部分 */
}

.image-upload-section {
  margin-bottom: 25px;
}

.upload-icon {
  font-size: 24px;
  color: #666;
}

.upload-text {
  margin-top: 8px;
  color: #999;
  font-size: 14px;
}

.upload-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  text-align: center;
}

.preview-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #ff4d4f;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.product-info {
  flex-grow: 1;
  /* 信息区域占满剩余空间 */
  padding: 10px 0;
}

.product-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  /* 底部浅色分隔线 */
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 两列布局 */
  gap: 20px;
  /* 信息项之间的间距 */
}

.info-item {
  line-height: 1.8;
  font-size: 15px;
}

.label {
  color: #666;
  /* 标签文字颜色 */
  margin-right: 8px;
}

.value {
  color: #333;
  /* 内容文字颜色 */
}

/* 响应式调整：小屏幕时改为单列布局 */
@media (max-width: 768px) {
  .product-container {
    flex-direction: column;
  }

  .product-image-section {
    width: 100%;
  }

  .main-image {
    height: auto;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>